<template>
	<view>
		<navbar background="transparent"></navbar>
		<image class="loginbg" src="https://youlinapi.zhihui361.com/image/wx/loginbg.png" mode=""></image>
		<view class="main pr fa fdc">
			<view class="flex1 fa fdc" style="width: 100%;">
				<image class="logo" :src="logo" mode=""></image>
				<view class="title">欢迎进入{{appName}}小程序</view>
				<view class="confirm-btn pr fa jcc" @click="authLogin">授权登录</view>
			</view>
			<view class="read-box fa jcc" @click="checked = !checked">
				<image class="pick-icon" src="../../static/pick-fill.png" mode="" v-if="checked"></image>
				<image class="pick-icon" src="../../static/pick.png" mode="" v-else></image>
				<view class="fa">
					<text>我已阅读并同意</text>
					<text class="theme" @click.stop="goAgreement(1)">《用户协议》</text>
					<text>和</text>
					<text class="theme" @click.stop="goAgreement(2)">《隐私政策》</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :mask-click="false" border-radius="10px 10px 0 0">
			<view class="user-wrapper">
				<view class="title">获取你的昵称、头像</view>
				<view class="prompt">生成账号信息</view>
				<view class="user-box">
					<view class="user-list fa jcsb">
						<view class="name">头像</view>
						<view class="fa">
							<button class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar-icon" :src="avatar" mode="" v-if="avatar"></image>
								<image class="avatar-icon" src="../../static/avatar.png" mode="" v-else></image>
							</button>
							<image class="right-icon" src="../../static/right.png" mode=""></image>
						</view>
					</view>
					<view class="user-list nick fa jcsb">
						<view class="name">昵称</view>
						<input class="nickname" type="nickname" placeholder="请输入昵称" v-model="nickname" @blur="nicknameBlur" />
					</view>
					<!-- <view class="user-list nick fa jcsb">
						<view class="name">手机号</view>
						<view v-if="mobile">{{mobile}}</view>
						<view class="mobile-btn fa jcc pr" v-else>
							<view>获取手机号</view>
							<button class="phone-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
						</view>
					</view> -->
				</view>
				<view class="btn-box fa jcsb">
					<view class="cancelbtn fa jcc" @click="fillCancel">取消</view>
					<view class="confirmbtn fa jcc" @click="fillConfirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: '',
				appName: '',
				checked: false,
				avatar: '',
				headimgurl: '',
				nickname: '',
				regData: {
					openId: ''
				},
				mobile: ''
			};
		},
		onLoad() {
			this.getSetting()
		},
		methods: {
			getSetting() {
				this.api.appSettingFunc({
					groupKey: 'system'
				}).then(res => {
					if(res.code == 200) {
						this.logo = res.data.logo
						this.appName = res.data.name
					}
				})
			},
			// 查看用户协议
			goAgreement(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				})
			},
			// 授权登录
			authLogin() {
				if(!this.checked) return uni.showToast({
					title: '请先同意用户协议',
					icon: 'none'
				})
				this.wxLogin()
			},
			// 授权手机号登录
			getPhoneNumber(e) {
				console.log('授权手机号', e)
				this.api.authPhoneFunc({
					code: e.detail.code
				}).then(res => {
					console.log(res)
					if(res.code == 200) {
						this.mobile = res.data
					}
				})
			},
			// 修改头像
			onChooseAvatar(e) {
				this.api.uploadFileFunc(e.detail.avatarUrl).then(res => {
					console.log(res)
					this.avatar = res.url
					this.headimgurl = res.fileName
				})
			},
			// 修改昵称
			nicknameBlur(e) {
				this.nickname = e.detail.value
			},
			// 取消修改信息
			fillCancel() {
				this.$refs.popup.close()
			},
			// 确认修改信息
			fillConfirm() {
				if(this.avatar == '') return uni.showToast({
					title: '请点击头像进行修改',
					icon: 'none'
				})
				if(this.nickname == '') return uni.showToast({
					title: '请输入昵称',
					icon: 'none'
				})
				// if(this.mobile == '') return uni.showToast({
				// 	title: '未获取到手机号',
				// 	icon: 'none'
				// })
				this.api.noLoginUpdateFunc({
					openId: this.regData.openId,
					avatar: this.avatar,
					name: this.nickname
				}).then(res => {
					this.$refs.popup.close()
					if(res.code == 200) {
						uni.showToast({
							title: '登录成功'
						})
						uni.setStorageSync('token', res.data)
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}else {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '登录失败',
						icon: 'none'
					})
				})
			},
			// 登录过程
			wxLogin() {
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				uni.login({
					success: result => {
						console.log(result)
						this.api.authLoginFunc({
							code: result.code
						}).then(res => {
							uni.hideLoading()
							if(res.code == 200) {
								this.regData = res.data
								if(res.data.token == null) {
									this.$refs.popup.open()
								}else {
									uni.showToast({
										title: '登录成功'
									})
									uni.setStorageSync('token', res.data.token)
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								}
							}else {
								uni.hideLoading()
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(err => {
							console.log(err)
							uni.hideLoading()
							uni.showToast({
								title: err.msg
							})
						})
					}
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.loginbg{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
	.main{
		padding: 248rpx 70rpx 30rpx;
		height: 100%;
		.logo{
			width: 156rpx;
			height: 156rpx;
			border-radius: 50%;
		}
		.title{
			margin-top: 34rpx;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 42rpx;
		}
		.confirm-btn{
			margin: 174rpx 0 24rpx;
			width: 100%;
			font-size: 30rpx;
			font-weight: normal;
			.phone-button{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				border-radius: 44rpx;
				opacity: 0;
			}
		}
	}
	.read-box{
		font-size: 24rpx;
		color: #777;
		text{
			font-size: 24rpx;
		}
		.pick-icon{
			margin-right: 12rpx;
			width: 28rpx;
			height: 28rpx;
		}
	}
	.user-wrapper{
		padding: 46rpx 48rpx 70rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		.title{
			 font-size: 36rpx;
			 font-weight: bold;
			 color: #000;
		}
		.prompt{
			margin-top: 10rpx;
			font-size: 32rpx;
			color: #999;
		}
		.user-box{
			.user-list{
				padding: 22rpx 0;
				border-bottom: 2rpx solid #E1E1E1;
				.name{
					font-size: 32rpx;
					font-weight: bold;
				}
				.avatar-box{
					padding: 0;
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}
				.avatar-icon{
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}
				.right-icon{
					margin-left: 22rpx;
					width: 36rpx;
					height: 36rpx;
				}
				.nickname{
					text-align: right;
				}
				&.nick{
					padding: 44rpx 0;
				}
				.mobile-btn{
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #04C160;
					.phone-button{
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						width: 160rpx;
						height: 60rpx;
						border-radius: 8rpx;
						opacity: 0;
					}
				}
			}
		}
		.btn-box{
			margin: 68rpx 56rpx 0;
			font-size: 30rpx;
			.cancelbtn{
				width: 255rpx;
				height: 88rpx;
				border-radius: 8rpx;
				color: #07C160;
				background-color: #F2F2F2;
			}
			.confirmbtn{
				width: 255rpx;
				height: 88rpx;
				border-radius: 8rpx;
				color: #fff;
				background-color: #04C160;
			}
		}
	}
</style>
